<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:shiro="http://shiro.apache.org/tags"
                template="/WEB-INF/templates/default.xhtml">
    <ui:define name="content">

        <h:messages id="messages_jsId"/>

        <h:form id="users_form">

            <h:panelGrid columns="5">
                <shiro:hasPermission name="users:create">
                    <p:commandButton id="new_btn" value="New" action="#{users.newUser}" update=":editUserDetailsDialog_pg"
                                     oncomplete="editUserDetails.show()"/>
                </shiro:hasPermission>
                <shiro:hasPermission name="users:view">
                    <p:commandButton id="view_btn" value="View" process="@this users_dt" update=":viewUserDetailsDialog_pg"
                                     oncomplete="viewUserDetails.show();"/>
                </shiro:hasPermission>
                <shiro:hasPermission name="users:edit">
                    <!-- don't forget to process yourself with @this ! -->
                    <p:commandButton id="edit_btn" value="Edit" process="@this users_dt" action="#{users.editUser}"
                                     update=":editUserDetailsDialog_pg" oncomplete="editUserDetails.show()"/>
                </shiro:hasPermission>
                <shiro:hasPermission name="users:delete">
                    <p:commandButton id="delete_btn" value="Delete"/>
                </shiro:hasPermission>
                <p:button value="Back" outcome="index?faces-redirect=true"/>
            </h:panelGrid>

            <p:dataTable id="users_dt" value="#{usersList}" var="user" selectionMode="single" selection="#{users.selectedUser}"
                         rowKey="#{user.id}">

                <f:facet name="header">
                    <h:outputText id="users_dth" value="Users List"/>
                </f:facet>

                <p:ajax event="rowDblselect" oncomplete="viewUserDetails.show();" update=":viewUserDetailsDialog_pg"/>

                <p:column headerText="First Name">
                    <h:outputText value="#{user.firstName}"/>
                </p:column>
                <p:column headerText="Last Name">
                    <h:outputText value="#{user.lastName}"/>
                </p:column>
                <p:column headerText="EMail">
                    <h:outputText value="#{user.email}"/>
                </p:column>
                <p:column headerText="Phone">
                    <h:outputText value="#{user.phoneNumber}"/>
                </p:column>
                <p:column headerText="Organization">
                    <h:outputText value="#{user.organization.name}"/>
                </p:column>
                <p:column headerText="Username" rendered="#{loggedUser.hasRole('admin')}">
                    <h:outputText value="#{user.username}"/>
                </p:column>
                <p:column headerText="Roles" rendered="#{loggedUser.hasRole('admin')}">
                    <h:outputText value="#{user.rolesAsString}"/>
                </p:column>
            </p:dataTable>

        </h:form>

        <p:dialog header="View User details" widgetVar="viewUserDetails" width="750" height="330" resizable="false">
            <h:panelGroup id="viewUserDetailsDialog_pg">

                <h:panelGrid columns="2">
                    <h:outputLabel styleClass="dialogLabel" value="First Name : "/><h:outputText value="#{selectedUser.firstName}"/>
                    <h:outputLabel styleClass="dialogLabel" value="Last Name : "/><h:outputText value="#{selectedUser.lastName}"/>
                    <h:outputLabel styleClass="dialogLabel" value="Email : "/><h:outputText value="#{selectedUser.email}"/>
                    <h:outputLabel styleClass="dialogLabel" value="Phone Number : "/><h:outputText value="#{selectedUser.phoneNumber}"/>
                    <h:outputLabel styleClass="dialogLabel" value="Other infos...."/>
                </h:panelGrid>

            </h:panelGroup>
        </p:dialog>

        <p:dialog id="editUser_dlg" header="Edit User details" widgetVar="editUserDetails" width="750" height="330" resizable="false">

            <h:panelGroup id="editUserDetailsDialog_pg">

                <h:form id="dialog_form" styleClass="inputForm">

                    <h:panelGrid columns="3">
                        <h:outputLabel styleClass="dialogLabel" value="First Name : "/><h:inputText id="firstName" value="#{selectedUser.firstName}"/><p:message id="firstNameMsg" for="firstName"/>
                        <h:outputLabel styleClass="dialogLabel" value="Last Name : "/><h:inputText id="lastName" value="#{selectedUser.lastName}"/><p:message id="lastNameMsg" for="lastName"/>
                        <h:outputLabel styleClass="dialogLabel" value="Email : "/><h:inputText id="email" value="#{selectedUser.email}"/><p:message id="emailMsg" for="email"/>
                        <h:outputLabel styleClass="dialogLabel" value="Phone Number : "/><h:inputText id="phone" value="#{selectedUser.phoneNumber}"/><p:message id="phoneMsg" for="phone"/>
                        <h:outputLabel styleClass="dialogLabel" value="Username : "/><h:inputText id="username" value="#{selectedUser.username}"/><p:message id="usernameMsg" for="username"/>
                        <h:outputLabel styleClass="dialogLabel" value="Roles : "/>
                        <p:selectManyCheckbox style="float:left;" id="roles" value="#{users.selectedUserRoles}">
                            <f:selectItem itemLabel="admin" itemValue="admin"/>
                            <f:selectItem itemLabel="user" itemValue="user"/>
                            <f:selectItem itemLabel="guest" itemValue="guest"/>
                        </p:selectManyCheckbox>
                        <p:message id="rolesMsg" for="roles"/>
                    </h:panelGrid>
                    <p:messages id="global_msgs" globalOnly="true"/>
                    <p:commandButton id="save_btn" value="Save" action="#{users.saveUser}" style="position:absolute;bottom:10px;"
                                     update=":users_form:users_dt dialog_form"
                                     oncomplete="if (!args.validationFailed) { editUserDetails.hide(); }"/>

                </h:form>
            </h:panelGroup>

        </p:dialog>

    </ui:define>
</ui:composition>
